<div class="switch__wrapper">
  <svg [ngClass]="{'fill-moon-dark': themeColor === 'dark', 'fill-moon-light': themeColor === 'light'}" width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M9.41985 1.92909C9.53714 1.83024 9.57869 1.66714 9.5277 1.51877C9.4819 1.37837 9.35393 1.26865 9.20638 1.25104C7.92071 1.08779 6.60574 1.38595 5.51273 2.09576C2.95173 3.75889 2.21371 7.19864 3.88203 9.76761C5.55034 12.3366 8.98491 13.0666 11.5539 11.3983C12.7027 10.6522 13.5319 9.50124 13.891 8.1678C13.9298 8.01787 13.8736 7.86152 13.764 7.76257C13.6543 7.66362 13.4856 7.64839 13.3476 7.71534C11.7497 8.5035 9.80617 7.97348 8.83212 6.47358C7.86564 5.0028 8.12087 3.09026 9.41985 1.92909ZM8.16475 6.89564C9.19061 8.47531 11.0978 9.1764 12.8659 8.72011C12.4918 9.54149 11.8949 10.2467 11.129 10.7441C8.92706 12.1741 5.9742 11.5396 4.5494 9.34556C3.1246 7.15156 3.75394 4.19072 5.94794 2.76592C6.658 2.30481 7.47645 2.04553 8.31076 2.0028C7.25414 3.41492 7.1648 5.35585 8.16475 6.89564Z" fill="#E9E9E9"/>
  </svg>
  <label class="switch">
    <input type="checkbox" (change)="onChange()" [checked]="themeColor === 'dark'">
    <span class="slider round"></span>
  </label>
  <svg [ngClass]="{'fill-sun': themeColor === 'dark'}" width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
    <path d="M7 10.3793C8.87069 10.3793 10.3793 8.85861 10.3793 6.99999C10.3793 5.14137 8.85862 3.62068 7 3.62068C5.14138 3.62068 3.62069 5.14137 3.62069 6.99999C3.62069 8.85861 5.12931 10.3793 7 10.3793ZM7 4.59827C8.32759 4.59827 9.40172 5.67241 9.40172 6.99999C9.40172 8.32758 8.32759 9.40172 7 9.40172C5.67241 9.40172 4.59828 8.32758 4.59828 6.99999C4.59828 5.67241 5.67241 4.59827 7 4.59827Z" fill="#FCFCFC"/>
    <path d="M7.49482 2.05172V0.494828C7.49482 0.217241 7.27758 0 7 0C6.72241 0 6.50517 0.217241 6.50517 0.494828V2.05172C6.50517 2.32931 6.72241 2.54655 7 2.54655C7.27758 2.54655 7.49482 2.32931 7.49482 2.05172Z" fill="#FCFCFC"/>
    <path d="M6.50517 11.9483V13.5052C6.50517 13.7828 6.72241 14 7 14C7.27758 14 7.49482 13.7828 7.49482 13.5052V11.9483C7.49482 11.6707 7.27758 11.4535 7 11.4535C6.72241 11.4535 6.50517 11.6707 6.50517 11.9483Z" fill="#FCFCFC"/>
    <path d="M10.85 3.85001L11.9483 2.75173C12.1414 2.55863 12.1414 2.24484 11.9483 2.05173C11.7552 1.85863 11.4414 1.85863 11.2483 2.05173L10.15 3.15001C9.9569 3.34311 9.9569 3.65691 10.15 3.85001C10.2466 3.94656 10.3672 3.99484 10.5 3.99484C10.6328 3.99484 10.7534 3.94656 10.85 3.85001Z" fill="#FCFCFC"/>
    <path d="M2.05172 11.9483C2.14827 12.0448 2.26896 12.0931 2.40172 12.0931C2.52241 12.0931 2.65517 12.0448 2.75172 11.9483L3.85 10.85C4.0431 10.6569 4.0431 10.3431 3.85 10.15C3.65689 9.95688 3.3431 9.95688 3.15 10.15L2.05172 11.2483C1.85862 11.4414 1.85862 11.7552 2.05172 11.9483Z" fill="#FCFCFC"/>
    <path d="M14 6.99998C14 6.7224 13.7828 6.50516 13.5052 6.50516H11.9483C11.6707 6.50516 11.4534 6.7224 11.4534 6.99998C11.4534 7.27757 11.6707 7.49481 11.9483 7.49481H13.5052C13.7707 7.49481 14 7.27757 14 6.99998Z" fill="#FCFCFC"/>
    <path d="M0.494828 7.49481H2.05172C2.32931 7.49481 2.54655 7.27757 2.54655 6.99998C2.54655 6.7224 2.32931 6.50516 2.05172 6.50516H0.494828C0.217241 6.50516 0 6.7224 0 6.99998C0 7.27757 0.22931 7.49481 0.494828 7.49481Z" fill="#FCFCFC"/>
    <path d="M11.5983 12.0931C11.719 12.0931 11.8517 12.0448 11.9483 11.9483C12.1414 11.7552 12.1414 11.4414 11.9483 11.2483L10.85 10.15C10.6569 9.95688 10.3431 9.95688 10.15 10.15C9.9569 10.3431 9.9569 10.6569 10.15 10.85L11.2483 11.9483C11.3448 12.0448 11.4776 12.0931 11.5983 12.0931Z" fill="#FCFCFC"/>
    <path d="M3.85 3.85001C4.0431 3.65691 4.0431 3.34311 3.85 3.15001L2.75172 2.05173C2.55862 1.85863 2.24482 1.85863 2.05172 2.05173C1.85862 2.24484 1.85862 2.55863 2.05172 2.75173L3.15 3.85001C3.24655 3.94656 3.36724 3.99484 3.5 3.99484C3.63275 3.99484 3.75344 3.94656 3.85 3.85001Z" fill="#FCFCFC"/>
  </svg>
</div>
